<template>
  <div class="login-container">
    <div class="form-box">
      <img
        class="logo"
        src="../assets/logo.png"
        alt=""
      >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            prefix-icon="el-icon-user"
            v-model="ruleForm.username"
          ></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            type='password'
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>

        <el-form-item class="btn-box">
          <el-button
            size="small"
            type="primary"
            @click="submitForm('ruleForm')"
          >登录</el-button>
          <el-button
            size="small"
            @click="resetForm('ruleForm')"
          >重置</el-button>

        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
           
<script>
import { login_api } from '@/api'
export default {
  data() {
    return {
      ruleForm: {
        username: 'admin',
        password: '123456'
      },
      /* 定义表单规则 */
      rules: {
        //  需要校验的属性名  然后给这个属性名制定了校验规则
        username: [
          //   失去焦点的时候做校验
          //  这里是做了两个校验
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          //   失去焦点的时候做校验
          //  这里是做了两个校验
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      //   获取form表单 然后对表单进行校验
      // this.$refs[formName].validate(valid => {
      //   //console.log(valid,555555);
      //   if (valid) {
      //     console.log(this, 77777)
      //     //  如果valid为true   表示校验满足规则  可以发送请求
      //     this.$axios.post('/login', this.ruleForm).then(res => {
      //       console.log(res, 999999)
      //       //  登录成功  跳转至home  否则   弹出提示框
      //       if (res.data.meta.status == 200) {
      //         //  成功
      //         // this.$message({
      //         //   message: '恭喜你，登录成功',
      //         //   type: 'success'
      //         // })
      //         this.$message.success('恭喜你，登录成功')
      //         this.$router.push('/home')
      //       } else {
      //         this.$message.error(res.data.meta.msg)
      //       }
      //     })
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })

      //   2次校验
      this.$refs[formName].validate(async valid => {
        if (valid) {
          //  满足校验规则
          //   满足校验规则就发送请求
          // const res = await this.$axios.post('/login', this.ruleForm)

          const res = await login_api(this.ruleForm)

          //console.log(res,66666);
          if (res.data.meta.status == 200) {
            //  成功后的判断
            //  成功
            // this.$message({
            //   message: '恭喜你，登录成功',
            //   type: 'success'
            // })
            this.$message.success('恭喜你，登录成功')

            /* 将token存入本地缓存 */
            window.sessionStorage.setItem('token', res.data.data.token)

            this.$router.push('/home') //  实现页面跳转
          } else {
            this.$message.error(res.data.meta.msg)
          }
        }
      })
    },

    //重置
    resetForm(formName) {
      this.$refs['ruleForm'].resetFields()
    },

    btn() {
      //  this指的是当前组件
      console.log(this.$refs.qqq, 33333)
      console.log(this.$refs['qqq'], 33333)
    }
  }
}
</script>
<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100%;
  background-color: #2b4b6b;
  position: relative;
  .form-box {
    width: 450px;
    height: 300px;
    border-radius: 3px;
    // top: 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .logo {
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
    }
    .el-form {
      margin-top: 80px;
      padding: 0 20px;
      .btn-box {
        text-align: right;
      }
    }
  }
}
</style>